<template>
    <section >
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.title" placeholder="规格名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search(1)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search(0)">清除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  :data="listData" >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="key" label="规格Key" ></el-table-column>
            <el-table-column prop="name" label="规格名称" width="220"></el-table-column>
            <el-table-column prop="nameUg" label="维吾尔文"></el-table-column>
            <el-table-column  prop="createTime" label="创建时间" ></el-table-column>
            <el-table-column prop="actions" label="操作" >
                <template slot-scope="scope" >
<!--                    <el-button type="primary" size="small" @click="handleValues(scope.$index, scope.row)">规格值</el-button>-->
                    <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
            <template >
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-col>

        <el-dialog :title="formTitle" v-model="formVisible" :close-on-click-modal="false" >
            <el-form :model="formModel" label-width="120px"  ref="formModel" :rules="formRules" >
                <el-row>
                    <el-col :span="8" >
                        <el-form-item label="规格Key" prop="key">
                            <el-input v-model="formModel.key" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="规格名" prop="name">
                            <el-input v-model="formModel.name" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="规格名(维)" prop="nameUg">
                            <el-input v-model="formModel.nameUg" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="规格Key" prop="valueKey">
                    <el-input v-model="formModel.valueKeyStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格值" prop="value">
                    <el-input v-model="formModel.valueStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格值(维)" prop="valueUg">
                    <el-input v-model="formModel.valueUgStr" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    import {deleteSpecApi, getSpecData, saveSpecData} from "../../api/api";

    export default {
        name: "List",
        data(){
            return{
                filters:{
                    title:''
                },
                page:1,
                pageSizes:[12,16,24],
                pageSize:12,
                total:0,
                listData:[],
                listLoading:false,
                formTitle:'',
                formModel:{},
                formVisible:false,
                formRules:{},
                saveLoading:false
            }
        },
        methods:{
            search(act){
                if(act == 0){
                    this.filters.title = ''
                }
                this.loadData()
            },
            loadData(){
                let _this = this;
                this.listLoading = true;
                getSpecData({
                    page:_this.page,
                    size:_this.pageSize,
                    key:_this.filters.title
                }).then(resp=>{
                    let data = resp.data.data;
                    _this.total = data.totalPage;
                    _this.listData = data.list;
                    _this.listLoading = false
                })
            },
            selsChange(){
                console.log('changed')
            },
            handleSizeChange(size){
                this.pageSize = size;
            },
            handleCurrentChange(page){
                this.page = page
            },
            handleAdd(){
                this.formVisible = true;
                this.formTitle = '新增规格'
            },
            handleEdit(index,row){
                this.formVisible = true;
                this.formTitle = '编辑规格'
                this.formModel = row;
            },
            handleDel(index,row){
                this.$confirm('确认删除该分类吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.id };
                    deleteSpecApi(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loadData();
                    });
                }).catch(() => {

                });
            },
            submit(){
                this.formVisible = true;
                this.saveData()
            },
            saveData(){
                let _this = this;
                saveSpecData(_this.formModel).then(resp=>{
                    if(resp.code == 200){
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.loadData();
                    }else{
                        this.$message({
                            message: resp.msg,
                            type: 'error'
                        });
                    }
                    _this.saveLoading = false;
                    _this.formVisible = false;
                })
            },
            handleValues(index,row){

            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>

<style scoped>

</style>
